

.container{
  margin-bottom: 10px; //和其他元素的间隔
  width: auto;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;

   //当鼠标点击上的话 添加阴影
  &:hover{
    box-shadow: 0px 10px 15px rgba(0,0,0,0.3);
  }
}

.title{
    display: flex;
    .left{
      flex: 1;
      text-align: left;
    }
  .right{
    flex:  1;
    text-align: right;
    font-size: medium;
    //.sp{
    //  background-color: #61dafb; /*深蓝色*/
    //  color: #fff; /*白色字体*/
    //  padding: 2px 4px; /*内边距*/
    //  border-radius: 2px; /*圆角边框*/
    //  text-shadow: 1px 1px 2px rgba(0,0,0,0.4); /*底部阴影*/
    //}
  }

}
//注意这里要用驼峰命名的方式写
.buttonContain{
   display: flex;
   .left{
     flex: 1;
     text-align: left;
     button {
       border: none;
       font-size: medium;
       font-family: "Comic Sans MS", cursive; /* 设置字体样式为宋体 */
     }
   }
   .right{
     flex: 1;
     text-align: right;
     color: black;
   }
}
